<template>
	<view class="wrap">
		<!-- 绑定手机号码 -->
		<u-input v-model="phone" type="text" :border="border" placeholder="请输入手机号码" />
		<view class="code-view">
			<u-input v-model="code" type="text" :border="border" placeholder="请输入验证码" class="code-input"/>
			<u-button type="info" :custom-style="{border:'none'}" :hair-line='false' v-if="!codeDown" :disabled="disabled" @click="codeCheck()">验证码</u-button>
			<u-button type="info" :custom-style="{border:'none'}" :hair-line='false' v-else>已发送({{codeDown}})s</u-button>
		</view>
		<u-button shape="square" @click="confirmCheck()" :custom-style="{border:'none'}" :hair-line='false' :disabled="formRight==true" >绑定</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				border: true,
				email_2: '',
				disabled: true,
				disabled_1: true,
				type: 'password',
				border: true,
				codeDown:0,
				disabled:true,
				confirmDisabled:true
			};
		},
		
		watch:{
			phone(newValue,oldValue){
				if(this.$u.test.mobile(this.phone)){
							this.disabled=false
						}else{
							this.disabled=true
						}
			}
		},
		computed:{
			formRight(){
				return !this.phone || !this.code 
			}
		},
		onLoad() {

		},
		methods: {
			//获取手机验证码
			async codeCheck() {
				const phone = {
					phone: this.phone
				}
				await this.$u.post('/api/auth/phone/code', phone).then(res => {
					// console.log(res)
					if(this.$u.test.mobile(this.phone)){
						this.codeDown=60;
						uni.showToast({
							title:'手机验证码发送成功',
							icon:'success'
						})
						this.intervalId=setInterval(()=>{
							this.codeDown--;
							if(this.codeDown===0){
								clearInterval(this.intervalId)
							}else{
								// this.$u.toast('倒计时结束后再发送')
							}
						},1000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 绑定手机号码
			async confirmCheck() {
				const params = {
					code: this.code,
					phone: this.phone
				}
				await this.$u.patch('/api/auth/phone/update', params).then(res => {
					if(res.statusCode===204){
						uni.showToast({
							title:'手机号码绑定成功',
							icon:'success'
						})
						setTimeout(res=>{
							uni.$u.route({
								type: 'switchTab',
								url: 'pages/me/me'
							})
						},1000)
						// 缓存电话号码
						// this.$u.vuex('vuex_user.phone','')
						// console.log(this.$u.vuex_user)
					}else{
						uni.showToast({
							title:'手机号码绑定失败',
							icon:'error'
						})
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.code-view{
		display: flex;
	}
	.emailRight{
		background-color: pink;
	}
	.u-field{
		border-color: rgb(220, 223, 230) !important;
		text-align: left !important;
	}
	.wrap {
		padding: 40rpx;
	}

	.text_1 {
		text-align: center;
		// color: #cccccc;
		padding: 40rpx 0;
	}

	.u-input {
		margin-bottom: 40rpx;
	}

	.u-btn {
		background-color: #ff9900;
		border: 1px solid white !important;
		// color: white;
	}

	uni-button[disabled]:not([type]),
	uni-button[disabled][type="default"] {
		background-color: #fdf3d0 !important;
	}
</style>
